<template>
  <div class="container">
    <div class="header">
      <div class="title">闸坝智能调度与安全检测</div>
      <div class="menu">
        <div class="item" @click="router.push({ path: '/szsyGateDamIndex' })">总体概况</div>
        <div class="item" @click="router.push({ path: '/szsyBeijiangIndex' })">北江船闸</div>
        <div class="item active">连江闸坝</div>
      </div>
    </div>
    <div class="main">
      <div class="left-content">
        <div class="top-part">
          <OlArc ref="OlArcRef"></OlArc>
          <div class="filter">
            <el-cascader 
              v-model="shipLock" 
              :options="shipLockOptions" 
              :show-all-levels="false"
              @change="shipLockChange"
            />
          </div>
        </div>
        <div class="bottom-part">
          <div class="base-info">
            <div class="title">基本信息</div>
            <div class="list">
              <div class="info-items" style="border-bottom: 1px solid #F0F0F0;">
                <div class="item" style="border-right: 1px solid #F0F0F0;">
                  <div class="name">船闸名称</div>
                  <div class="value">{{ baseInfoObj.name }}</div>
                </div>       
                <div class="item" style="border-right: 1px solid #F0F0F0;">
                  <div class="name pl18">所属航道</div>
                  <div class="value pl18">{{ baseInfoObj.channel }}</div>
                </div> 
                <div class="item">
                  <div class="name pl18">管理单位</div>
                  <div class="value pl18">{{ baseInfoObj.manage }}</div>
                </div>         
              </div>
              <div class="info-items" style="border-bottom: 1px solid #F0F0F0;">
                <div class="item" style="border-right: 1px solid #F0F0F0;padding-top:10px;">
                  <div class="name">船闸等级</div>
                  <div class="value">{{ baseInfoObj.slLevel }}</div>
                </div>       
                <div class="item" style="border-right: 1px solid #F0F0F0;padding-top:10px;">
                  <div class="name pl18">当年变形预警情况</div>
                  <div class="value pl18">{{ baseInfoObj.alertSit }}</div>
                </div> 
                <div class="item" style="padding-top:10px;">
                  <div class="name pl18">安全评定等级</div>
                  <div class="value pl18">{{ baseInfoObj.saveLvl }}</div>
                </div>         
              </div>
              <div class="info-items">
                <div class="item" style="border-right: 1px solid #F0F0F0;padding-top:10px;">
                  <div class="name">变形监测周期</div>
                  <div class="value">{{ baseInfoObj.cyc }}</div>
                </div>       
                <div class="item" style="border-right: 1px solid #F0F0F0;padding-top:10px;">
                  <div class="name pl18">建成年份</div>
                  <div class="value pl18">{{ baseInfoObj.createYear }}</div>
                </div> 
                <div class="item" style="padding-top:10px;">
                  <div class="name pl18">已使用年限</div>
                  <div class="value pl18">{{ baseInfoObj.useYear }}</div>
                </div>         
              </div>
            </div>
          </div>
          <div class="video">
            <div class="title">视频监控</div>
            <div class="subtitle">
              <div class="name">实时视频监控</div>
              <el-select
                v-model="videoPoint"
                size="small"
                :disabled="videoDirectoryData.length?false:true"
                @change="videoPointChange"                
                placeholder="请选择视频点" 
                style="width: 200px;"                    
              >
                <el-option
                  v-for="item in videoDirectoryData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="play-video" v-show="videoDirectoryData.length">
              <video 
                id="myVideo1" 
                class="video-js vjs-default-skin vjs-big-play-centered"         
                style="object-fit: fill;width: 100%;height: 100%;"
              >
              </video>                  
            </div>
            <div class="no-video" v-show="videoDirectoryData.length === 0">
              <img src="../../assets/images/pc/error.png" alt="">
              <div class="name">暂无视频</div>      
            </div> 
          </div>
        </div>
      </div>
      <div class="right-content">
        <div class="title">变形监测分析</div>
        <div class="subtitle">
          <div class="name">监测点数据分析</div>
        </div>
        <div class="count">
          <div class="first-item">
            <div class="name">
              <img src="../../assets/images/pc/monocycle-icon.png" alt="">
              <div>上月水坝单周期最大变形量</div>
            </div>
            <div class="name">
              <img src="../../assets/images/pc/accumulate-icon.png" alt="">
              <div>上月水坝累计变形量</div>
            </div>
          </div>
          <div class="second-item">
            <div class="item">
              <div class="name">平面(mm)</div>
              <div class="value">{{ defInfoData && defInfoData.plane? defInfoData.plane : '--' }}</div>
            </div>
            <div class="item">
              <div class="name">高程(mm)</div>
              <div class="value">{{ defInfoData && defInfoData.elevation? defInfoData.elevation : '--' }}</div>
            </div>
            <div class="item">
              <div class="name">水平方向(mm)</div>
              <div class="value">{{ defInfoData && defInfoData.lastMonthpm? `＜${defInfoData.lastMonthpm}` : "--" }}</div>
            </div>
            <div class="item">
              <div class="name">垂直方向(mm)</div>
              <div class="value">{{ defInfoData && defInfoData.lastMonthgc? `＜${defInfoData.lastMonthgc}` : "--" }}</div>
            </div>
          </div>
          <div class="third-item">
            <div class="item">
              <img src="../../assets/images/pc/quantity-one-icon.png" alt="">
              <div class="quantity">
                <div class="name">水坝变形监测点数量(个)</div>
                <div class="value">{{ defInfoData && defInfoData.pointNum? defInfoData.pointNum : '--' }}</div>
              </div>
            </div>
            <div class="item">
              <img src="../../assets/images/pc/quantity-two-icon.png" alt="">
              <div class="quantity">
                <div class="name">水坝测站布置情况</div>
                <div class="value">{{ defInfoData && defInfoData.arrangeSit || '--' }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="subtitle">
          <div class="name">变形监测统计</div>          
          <div class="btn-group">
            <div class="btn" :class="currentActive === 1? 'active' : ''" @click="currentActiveChange(1)">多点单周期图</div>
            <div class="btn" :class="currentActive === 2? 'active' : ''" @click="currentActiveChange(2)">单点多周期图</div>
          </div>
        </div>
        <div class="select-condition"> 
          <template v-if="currentActive === 1">
            <el-input
              v-model="cycle1"                          
              disabled
              style="width: 100px;margin-right: 10px;"
            />                       
            <el-select
              v-model="cycle"
              @change="cycleChange"
              placeholder="选择周期"    
              style="width: 100px;"                 
            >
              <el-option
                v-for="item in cycleOptions"
                :key="item.cycName"
                :label="item.cycName"
                :value="item.cycName"
              />
            </el-select>
            <div class="condition-btn">
              <div class="btn" :class="currentType1 === '本次'? 'active' : ''" @click="changeType1('本次')">本次</div>
              <div class="btn" :class="currentType1 === '累积'? 'active' : ''" @click="changeType1('累积')">累积</div>
            </div>
          </template>    
          <template v-if="currentActive === 2">
            <el-select
              v-model="pointName"
              placeholder="请选择点"  
              @change="singleValueChange"   
              style="width: 100px;margin-right: 10px;"                 
            >
              <el-option
                v-for="item in pointNameData"
                :key="item.value"
                :label="item.text"
                :value="item.value"
              />
            </el-select>
            <el-select
              v-model="singleType"
              placeholder="请选择类型"    
              @change="singleValueChange"  
              style="width: 80px;margin-right: 10px;"                  
            >
              <el-option
                v-for="item in singleTypeData"
                :key="item.value"
                :label="item.text"
                :value="item.value"
              />
            </el-select>
            <el-select
              v-model="singleValue1"
              placeholder="选择周期"   
              v-if="singleType === '周期'"  
              @change="singleValueChange"  
              style="width: 100px;margin-right: 10px;"               
            >
              <el-option
                v-for="item in cycleOptions"
                :key="item.cycName"
                :label="item.cycName"
                :value="item.cycName"
              />
            </el-select>
            <el-select
              v-model="singleValue2"
              placeholder="选择周期"     
              v-if="singleType === '周期'" 
              @change="singleValueChange"   
              style="width: 100px;"               
            >
              <el-option
                v-for="item in cycleOptions"
                :key="item.cycName"
                :label="item.cycName"
                :value="item.cycName"
              />
            </el-select>
            <el-date-picker
              v-model="singleTime"
              type="daterange"
              :clearable="false"
              value-format="YYYY-MM-DD"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"   
              @change="singleValueChange"
              style="width: 180px;"
              v-if="singleType === '时间'"
            />
            <div class="condition-btn">
              <div class="btn" :class="currentType2 === '本次'? 'active' : ''" @click="changeType2('本次')">本次</div>
              <div class="btn" :class="currentType2 === '累积'? 'active' : ''" @click="changeType2('累积')">累积</div>
            </div>
          </template>     
        </div>  
        <div id="first-chart"></div> 
        <div class="subtitle">
          <div class="name">变形监测观测周期统计</div>   
        </div>
        <div id="second-chart"></div> 
        <div class="subtitle">
          <div class="name">
            <div>闸坝情况记录</div>
            <div class="record-name" v-if="isShowRecord">
              <img src="../../assets/images/pc/arrow-icon.png" alt="">
              <div>{{ recordName }}</div>
            </div>
          </div> 
          <div class="back" @click="backFn" v-if="isShowRecord">
            <img src="../../assets/images/pc/back-icon.png" alt="">
            <div>返回</div>
          </div>
        </div>
        <div class="record">
          <template v-if="!isShowRecord">
            <div class="item" @click="ElMessage.warning('暂无数据')">
              <img src="../../assets/images/pc/record-one.png" alt="">      
              <div>日常维护记录</div>     
            </div>
            <div class="item" @click="ElMessage.warning('暂无数据')">
              <img src="../../assets/images/pc/record-two.png" alt="">      
              <div>船闸操作记录</div>     
            </div>
            <div class="item" @click="recordDetails('安全检查')">
              <img src="../../assets/images/pc/record-three.png" alt="">      
              <div>安全检查</div>     
            </div>
            <div class="item" @click="ElMessage.warning('暂无数据')">
              <img src="../../assets/images/pc/record-four.png" alt="">      
              <div>隐患跟踪处理</div>     
            </div>
            <div class="item" @click="recordDetails('除险加固记录')">
              <img src="../../assets/images/pc/record-five.png" alt="">      
              <div>除险加固记录</div>     
            </div>
          </template>  
          <template v-if="recordName === '安全检查'">
            <div class="info">
              <div class="info-item" style="border-right: 1px solid #F0F0F0;">
                <div class="name">检查频次数</div>
                <div class="value">{{ addStrongObj.inspectTimes }}</div>
              </div>
              <div class="info-item" style="border-right: 1px solid #F0F0F0;padding-left: 20px;">
                <div class="name">检查落实数</div>
                <div class="value">{{ addStrongObj.inspectPraTimes }}</div>
              </div>
              <div class="info-item" style="padding-left: 20px;">
                <div class="name">闸坝问题数</div>
                <div class="value">{{ addStrongObj.damIssues }}</div>
              </div>
            </div>
          </template>   
          <template v-if="recordName === '除险加固记录'">
            <div class="info">
              <div class="info-item" style="border-right: 1px solid #F0F0F0;">
                <div class="name">风险预警数</div>
                <div class="value">{{ addStrongObj.alarmNum }}</div>
              </div>
              <div class="info-item" style="border-right: 1px solid #F0F0F0;padding-left: 20px;">
                <div class="name">加固次数</div>
                <div class="value">{{ addStrongObj.strongTimes }}</div>
              </div>
              <div class="info-item" style="padding-left: 20px;">
                <div class="name">风险消除数</div>
                <div class="value">{{ addStrongObj.disAlert }}</div>
              </div>
            </div>
          </template>     
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted, nextTick, onUnmounted } from 'vue';
  import { useRouter } from 'vue-router';
  const router = useRouter();
  import { ElMessage } from 'element-plus';
  //引入echarts
  import * as echarts from 'echarts/core';
  import { TooltipComponent, LegendComponent, GridComponent, DataZoomComponent } from 'echarts/components';
  import { PieChart, BarChart, LineChart } from 'echarts/charts';
  import { CanvasRenderer } from 'echarts/renderers';
  echarts.use([TooltipComponent, LegendComponent, GridComponent, DataZoomComponent, PieChart, BarChart, LineChart, CanvasRenderer]);

  //引入videojs
  import videojs from 'video.js';
  import 'video.js/dist/video-js.css';
  import VideojsZhcnLanguage from 'video.js/dist/lang/zh-CN.json';
  videojs.addLanguage('zh-CN',VideojsZhcnLanguage);

  // 引入api
  import {
    getShipLockSmall, //获取船闸
    baseInfo, //基本信息
    videoDirectory, //获取视频点
    geVideotUrl, //获取视频URL
    defInfo, //监测点数据分析
    getCycList, //获取周期
    defAyls, //多点单周期图
    defSingleAyls, //单点多周期图
    cycleStatis, //变形监测观测周期统计
    addStrong, //闸坝情况记录
  } from '@/bridge-h5/utils/myapi';

  //地图
  import OlArc from './olArcDetailsLianjiang.vue';
  const OlArcRef = ref(null); 

  //获取船闸
  const shipLock = ref([]);
  const shipLockOptions = ref([]);
  const getShipLockFn = () => {
    getShipLockSmall("连江").then((res) => {
      if(res.code === 200){
        let data = [
          { label: "船闸",  value: "船闸", children: [] },
          { label: "水坝",  value: "水坝", children: [] }
        ];
        res.data.cz.forEach((item) => {
          data[0].children.push({
            label: item.name,
            value: item.name
          });
        });
        res.data.sb.forEach((item) => {
          data[1].children.push({
            label: item.name,
            value: item.name
          });
        });            
        shipLockOptions.value = data;  
        shipLock.value = [shipLockOptions.value[0].value,shipLockOptions.value[0].children[0].value];

        baseInfoFn();
        initVideo();
        defInfoFn();
        getCycListFn();
        cycleStatisFn();
        addStrongFn();
      }
    });
  };
  const shipLockChange = () => {
    OlArcRef.value.getPositionFn(shipLock.value[1]);
    baseInfoFn();
    videoDirectoryFn();
    defInfoFn();
    getCycListFn();
    cycleStatisFn();
    addStrongFn();
  };
  //基本信息
  const baseInfoObj = ref({});
  const baseInfoFn = () => {
    baseInfo(shipLock.value[1]).then((res) => {
      if(res.code === 200 && res.data){
        baseInfoObj.value = res.data;
      }
    });
  };
  //视频监控
  const initVideo = () => {
    nextTick(() => { 
      videojs("myVideo1",{
        language: 'zh-CN',  //汉化
        autoplay: true, // true,浏览器准备好时开始播放
        loop: true, // 导致视频一结束就重新开始
        controls: true, //取消视频中的进度条
        muted: true, //是否静音
        preload: 'metadata', //auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）      
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 无法播放媒体源时显示的默认信息
        textTrackDisplay: false,
        techOrder: ['html5', 'flash'],
        controlBar: {
          fullscreenToggle: false, //禁用全屏
        }
      }); 
    });
    videoDirectoryFn();
  };   
  const videoPoint = ref('');
  const videoDirectoryData = ref([]);
  const videoDirectoryFn = () => {
    videoDirectory(shipLock.value[1]).then((res) => {
      if(res.code === 200 && res.data.length){
        videoDirectoryData.value = res.data;   
        videoPoint.value = res.data[0].id;      
        geVideotUrlFn();
      }else{
        videoDirectoryData.value = [];
        videoPoint.value = "";   
      }
    });
  };
  const geVideotUrlFn = () => {
    geVideotUrl(videoPoint.value).then((res) => {
      if(res.code === 200 && res.data){
        const myPlayer = videojs("myVideo1"); 
        myPlayer.src([
          {
            type: 'application/x-mpegURL',
            src: res.data.url, //视频播放地址
          }
        ]); 
        myPlayer.play();
      }
    });
  }; 
  const videoPointChange = () => {
    geVideotUrlFn();
  };
  //监测点数据分析
  const defInfoData = ref({});
  const defInfoFn = () => {
    defInfo(shipLock.value[1]).then((res) => {
      if(res.code === 200){
        defInfoData.value = res.data;
      }
    });
  };
  //变形监测统计
  const currentActive = ref(1);
  const currentActiveChange = (val) => {
    currentActive.value = val;
    singleType.value = "周期";
    if(val === 1){
      defAylsFn();
    }else{
      defSingleAylsFn();
    }
  };
  const cycle = ref('');
  const cycle1 = ref('周期');
  const singleType = ref('周期');
  const singleTypeData = [
    { text: '周期', value: '周期' },
    { text: '时间', value: '时间' },
  ];
  const singleValue1 = ref('');
  const singleValue2 = ref('');   
  const singleTime = ref([new Date().format("yyyy-MM-dd"),new Date().format("yyyy-MM-dd")]);
  const cycleOptions = ref([]);
  const currentType1 = ref("累积");
  const changeType1 = (val) => {
    currentType1.value = val;
    defAylsFn();
  };
  const currentType2 = ref("累积"); 
  const changeType2 = (val) => {
    currentType2.value = val;
    defSingleAylsFn();
  };
  const cycleChange = () => {
    defAylsFn();
  };
  const singleValueChange = () => {
    defSingleAylsFn();
  };
  const getCycListFn = () => {
    getCycList(shipLock.value[1]).then((res) => {
      if(res.code === 200){
        res.data.forEach((item) => {
          item.cycName = `第${item.cyc}周期`;
        }); 
        cycleOptions.value = res.data;
        if(res.data.length){
          cycle.value = res.data[0].cycName;
          singleValue1.value = res.data[3].cycName;
          singleValue2.value = res.data[0].cycName;          
        }else{
          cycle.value = "";
          singleValue1.value = "";
          singleValue2.value = "";
        }  
        defAylsFn();
      }
    });
  };
  const pointName = ref('');
  const pointNameData = ref([]);
  const aylsXAxisData = ref([]);
  const aylsSeriesData = ref([]);
  const legendData = ref({});
  const defAylsFn = () => {
    defAyls(shipLock.value[1], cycle.value.replace('第','').replace('周期','')).then((res) => {
      if(res.code === 200){
        if(res.data.length){
          let nData = [];
          let eData = [];
          let zData = [];
          let yujing1 = [];
          let yujing2 = [];

          let thisnData = [];
          let thiseData = [];
          let thiszData = [];
          pointNameData.value = [];
          aylsXAxisData.value = [];
          res.data.forEach((item) => { 
            pointNameData.value.push(
              { text: item.pointName, value: item.pointName }              
            );
            aylsXAxisData.value.push(item.pointName);
            nData.push(item.acDn);
            eData.push(item.acDe);
            zData.push(item.acDz);
            yujing1.push(30);
            yujing2.push(-30);
            thisnData.push(item.thisDn);
            thiseData.push(item.thisDe);
            thiszData.push(item.thisDz);
          });
          pointName.value = pointNameData.value[0].value;
          if(currentType1.value === "累积"){
            aylsSeriesData.value = [
              {
                name: '累积变化量N',
                type: 'line',
                //smooth: true,
                data: nData,
                lineStyle: {
                  color: '#0051FF',
                },    
              },
              {
                name: '累积变化量E',
                type: 'line',
                //smooth: true,
                data: eData,
                lineStyle: {
                  color: '#66D88A',
                },  
              },
              {
                name: '累积变化量Z',
                type: 'line',
                //smooth: true,
                data: zData,
                lineStyle: {
                  color: '#FFB900',
                },  
              },
              {
                name: '预警值',
                type: 'line',
                data: yujing1,  
                showSymbol: false,  
                lineStyle: {
                  color: '#F13939',
                  width: 1,
                  type: 'dashed'
                },           
              },
              {
                name: '预警值',
                type: 'line',
                data: yujing2,
                showSymbol: false,  
                lineStyle: {
                  color: '#F13939',
                  width: 1,
                  type: 'dashed'
                },       
              }
            ];
            legendData.value = {
              data: ['累积变化量N', '累积变化量E', '累积变化量Z', '预警值', '预警值'],
            };
          }else if(currentType1.value === "本次"){
            aylsSeriesData.value = [
              {
                name: '本次变化量N',
                type: 'line',
                //smooth: true,
                data: thisnData,
                lineStyle: {
                  color: '#0051FF',
                },   
              },
              {
                name: '本次变化量E',
                type: 'line',
                //smooth: true,
                data: thiseData,
                lineStyle: {
                  color: '#66D88A',
                },   
              },
              {
                name: '本次变化量Z',
                type: 'line',
                //smooth: true,
                data: thiszData,
                lineStyle: {
                  color: '#FFB900',
                },   
              }
            ];
            legendData.value = {
              data: ['本次变化量N', '本次变化量E', '本次变化量Z'],
            };
          }
         
          initFirstChart();
        }else{
          pointNameData.value = [];
          pointName.value = "";

          aylsXAxisData.value = [];
          aylsSeriesData.value = [];
          initFirstChart();
        }      
      }
    });
  };
  const defSingleAylsFn = () => {
    defSingleAyls(
      singleType.value === '周期'? singleValue1.value.replace('第','').replace('周期','') : singleTime.value[0], 
      singleType.value === '周期'? singleValue2.value.replace('第','').replace('周期','') : singleTime.value[1], 
      singleType.value === '周期'? 1 : 2, 
      pointName.value, 
      shipLock.value[1]
    ).then((res) => {
      if(res.code === 200){
        let nData = [];
        let eData = [];
        let zData = [];
        let yujing1 = [];
        let yujing2 = [];

        let thisnData = [];
        let thiseData = [];
        let thiszData = [];
        aylsXAxisData.value = [];
        res.data.forEach((item) => {
          if(singleType.value === 2){
            aylsXAxisData.value.push(item.createTime);
          } else {
            aylsXAxisData.value.push(item.cyc);
          }         

          nData.push(item.acDn);
          eData.push(item.acDe);
          zData.push(item.acDz);
          yujing1.push(30);
          yujing2.push(-30);
          thisnData.push(item.thisDn);
          thiseData.push(item.thisDe);
          thiszData.push(item.thisDz);
        });

        if(currentType2.value === "累积"){
            aylsSeriesData.value = [
              {
                name: '累积变化量N',
                type: 'line',
                //smooth: true,
                data: nData,
                lineStyle: {
                  color: '#0051FF',
                },  
              },
              {
                name: '累积变化量E',
                type: 'line',
                //smooth: true,
                data: eData,
                lineStyle: {
                  color: '#66D88A',
                },  
              },
              {
                name: '累积变化量Z',
                type: 'line',
                //smooth: true,
                data: zData,
                lineStyle: {
                  color: '#FFB900',
                },  
              },
              {
                name: '预警值',
                type: 'line',                
                data: yujing1,
                showSymbol: false,  
                lineStyle: {
                  color: '#F13939',
                  width: 1,
                  type: 'dashed'
                },   
              },
              {
                name: '预警值',
                type: 'line',
                data: yujing2,
                showSymbol: false,  
                lineStyle: {
                  color: '#F13939',
                  width: 1,
                  type: 'dashed'
                },   
              }
            ];
            legendData.value = {
              data: ['累积变化量N', '累积变化量E', '累积变化量Z', '预警值', '预警值'],
            };
          }else if(currentType2.value === "本次"){
            aylsSeriesData.value = [
              {
                name: '本次变化量N',
                type: 'line',
                //smooth: true,
                data: thisnData,
                lineStyle: {
                  color: '#0051FF',
                },  
              },
              {
                name: '本次变化量E',
                type: 'line',
                //smooth: true,
                data: thiseData,
                lineStyle: {
                  color: '#66D88A',
                },  
              },
              {
                name: '本次变化量Z',
                type: 'line',
                //smooth: true,
                data: thiszData,
                lineStyle: {
                  color: '#FFB900',
                },  
              }
            ];
            legendData.value = {
              data: ['本次变化量N', '本次变化量E', '本次变化量Z'],
            };
          }
        initFirstChart();
      }
    });
  };
  const initFirstChart = () => {
    nextTick(() => {
      let lineChart = echarts.getInstanceByDom(document.getElementById("first-chart"));
      if(lineChart != null && lineChart != "" && lineChart != undefined){
        lineChart.dispose();
      }
      lineChart = echarts.init(document.getElementById('first-chart'));
      let option;
      option = {
        grid: {
          top: '25%',
          left: '40px',
          right: '15px',
          bottom: '40px',
        },
        tooltip: {
          trigger: 'axis',
          confine: true, //限制在图表区域内
 
          formatter: function (params) {
            let template = `<b>${params[0].axisValue}</b><br>`;         
            for(let i = 0; i < 3; i++){
              let item = params[i];
              template += item.marker + item.seriesName + ': ' + `<b style="float:right;padding-left: 20px;">${item.data}mm</b><br>`
            }  
            return template  
          },  
        },
        legend: legendData.value,
        xAxis: {
          type: 'category',
          data: aylsXAxisData.value,
          axisLabel: {
            interval:0,             
          },
          axisLine: {
            onZero: true // 将X轴在Y轴0刻度的位置固定
          }
        },
        yAxis: {
          type: 'value',
          name: '单位：mm',
          axisLabel: {
            interval:0, 
          },
          splitLine: {
            show: true,            
          } 
        },
        series: aylsSeriesData.value
      };

      option && lineChart.setOption(option);
    });
  };
  //变形监测观测周期统计
  const cycleStatisxAxisData = ref([]);
  const cycleStatisseriesData = ref([]);
  const cycleStatisFn = () => {
    cycleStatis(shipLock.value[1]).then((res) => {
      cycleStatisxAxisData.value = [];
      cycleStatisseriesData.value = [];
      if(res.code === 200){
        nextTick(() => {
          res.data.forEach((item) => {
            cycleStatisxAxisData.value.push(item.time);
            cycleStatisseriesData.value.push(item.cyc);
          });

          let barChart = echarts.getInstanceByDom(document.getElementById("second-chart"));
          if (barChart == null) {
            barChart = echarts.init(document.getElementById("second-chart"));
          }
          let option;
          option = {
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
              confine: true, //限制在图表区域内
              formatter: function(params){
                let value = params[0].value + '次';
                return params[0].seriesName + '<br/>' + params[0].name + ' : ' + value;
              }
            },
            grid: {
              top: "15%",
              left: "8%",
              right: "10%",
              bottom: "5%",
              containLabel: true,
            },
            dataZoom: [
              {
                show: false,
                type: "inside",
                startValue: 0,
                endValue: 7,
                zoomLock: false,
              },
            ],
            xAxis: [
              {
                type: "category",
                data: cycleStatisxAxisData.value,
                name: "时间",
                axisLabel:{
                  interval: 0,
                },
              },  
            ],
            yAxis: [
              {
                type: "value",
                name: '统计次数：次',      
              },
            ],
            series: [
              {
                name: "统计次数",
                data: cycleStatisseriesData.value,
                type: "bar",
                barWidth: 10,
                itemStyle: {
                  color: '#0051FF'
                },
              },
            ],
          };

          option && barChart.setOption(option);
        });
      }
    });
  };
  //闸坝情况记录
  const addStrongObj = ref({});
  const addStrongFn = () => {
    addStrong(shipLock.value[1]).then((res) => {
      if(res.code === 200){
        addStrongObj.value = res.data;
      }
    });
  };
  const isShowRecord = ref(false);
  const recordName = ref("");
  const recordDetails = (val) => {
    recordName.value = val;
    isShowRecord.value = true;
  };
  const backFn = () => {
    recordName.value = "";
    isShowRecord.value = false;
  };

  onMounted(() => {
    document.title = "闸坝智能调度与安全检测";
    getShipLockFn();
  }); 
  onUnmounted(() => {
    setTimeout(() => {
      const myPlayer = videojs("myVideo1");    
      if(myPlayer){
        myPlayer.dispose();
      }   
    }, 1000);   
  });
</script>

<style lang="scss" scoped>
  @font-face{
    font-family: Din;
    src: url("../../assets/fonts/din.ttf");
  }
  @font-face{
    font-family: Tx;
    src: url("../../assets/fonts/tx.ttf");
  }
  .container{    
    width: 2560px;
    height: 1660px;
    box-sizing: content-box;
    .header{
      height: 40px;    
      display: flex;
      align-items: center;  
      justify-content: space-between; 
      background: #FFFFFF;
      box-shadow: 0px 2px 4px 0px rgba(204,213,232,0.3);
      border-radius: 4px;  
      margin: 16px 16px 0px 16px; 
      padding: 0 16px;
      .title{
        font-family: 'Tx';
        font-weight: 500;
        font-size: 18px;
        color: #262626;
      }
      .menu{
        display: flex;
        align-items: center;
        .item{
          font-weight: 400;
          font-size: 16px;
          color: #262626;
          padding: 6px 18px;
          border-radius: 4px;
        }
        .active{
          color: #FFFFFF;
          background: #0051FF;
        }
      }
    }
    .main{
      box-sizing: content-box;
      height: 1604px;
      margin: 16px;      
      display: flex;
      .left-content{
        width: 1694px;
        height: 1572px;        
        box-sizing: content-box;
        margin-right: 16px;
        .top-part{
          height: 951px;
          margin-bottom: 16px;
          position: relative;
          .filter{
            position: absolute;
            top: 16px;
            left: 16px;
          }
        }
        .bottom-part{
          height: 605px;
          display: flex;
          .base-info{    
            width: 839px;     
            margin-right: 16px;   
            background: #FFFFFF;
            .title{
              height: 48px;
              background: linear-gradient( 90deg, rgba(215,227,255,0.4) 0%, #D7E3FF 100%);
              font-weight: 500;
              font-size: 18px;
              color: #262626;
              line-height: 48px;
              padding-left: 16px;
            }
            .list{        
              margin: 80px 40px;     
              .info-items{
                display: flex;                
                .item{                  
                  width: 33.33%;
                  .name{
                    font-weight: 400;
                    font-size: 18px;
                    color: #595959;
                    margin-bottom: 4px;
                  }
                  .value{
                    font-weight: 800;
                    font-size: 24px;
                    color: #262626;
                    margin-bottom: 20px;
                  }
                  .pl18{
                    padding-left: 18px;
                  }
                  .pt18{
                    margin-top: 18px;
                  }
                }
              }
            }
          }
          .video{
            width: 839px;      
            background: #FFFFFF;  
            .title{
              height: 48px;
              background: linear-gradient( 90deg, rgba(215,227,255,0.4) 0%, #D7E3FF 100%);
              font-weight: 500;
              font-size: 18px;
              color: #262626;
              line-height: 48px;
              padding-left: 16px;
            }
            .subtitle{
              height: 48px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 0 16px;
              border-bottom: 1px solid #F0F0F0;
              .name{
                font-weight: 500;
                font-size: 16px;
                color: #262626;
              }
            }
            .play-video{
              height: 485px;
              margin: 8px 16px 16px 16px;
            }
            .no-video{
              height: 485px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              .name{
                font-weight: 500;
                font-size: 16px;
                color: #262626;
                margin-top: 8px;
              }
            }
          } 
        }
      }
      .right-content{
        width: 818px;
        height: 1572px;      
        box-sizing: content-box;
        background: #FFFFFF;
        .title{
          height: 48px;
          background: linear-gradient( 90deg, rgba(215,227,255,0.4) 0%, #D7E3FF 100%);
          font-weight: 500;
          font-size: 18px;
          color: #262626;
          line-height: 48px;
          padding-left: 16px;
        }
        .subtitle{
          height: 48px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 16px;
          border-bottom: 1px solid #F0F0F0;
          .name{
            font-weight: 500;
            font-size: 16px;
            color: #262626;
            display: flex;
            align-items: center;
            .record-name{
              display: flex;
              align-items: center;
              font-weight: 500;
              font-size: 16px;
              color: #0051FF;
              padding-left: 4px;
              img{
                width: 8px;
                height: 16px;
                padding-right: 4px;
              }
            }
          }
          .btn-group{
            display: flex;
            justify-content: center;
            .btn{
              padding: 5px 16px; 
              font-weight: 400;
              font-size: 16px;
              color: #262626;  
              border: 1px solid #D9D9D9;  
              border-radius: 4px;
            }
            .active{
              color: #0051FF;
              border: 1px solid #0051FF;
            }
          }                         
          .back{
            display: flex;
            align-items: center;
            font-weight: 400;
            font-size: 16px;
            color: #0051FF;
            padding: 5px 16px;
            border-radius: 4px;
            border: 1px solid #0051FF;
            img{
              width: 20px;
              height: 16px;
            }
          }     
        }
        .count{
          display: flex;
          height: 92px;
          box-sizing: content-box;
          .first-item{
            width: 33.33%;
            margin-left: 16px;
            .name{
              height: 36px;
              display: flex;
              align-items: center;
              font-weight: 500;
              font-size: 16px;
              color: #292929;
              img{
                width: 16px;
                height: 16px;
                padding-right: 3px;
              }
            }
          }
          .second-item{
            width: 33.33%;
            display: flex;
            align-items: center;
            flex-wrap: wrap;            
            margin-top: 8px;
            border-right: 1px solid #F0F0F0;
            .item{
              width: 50%;
              .name{
                font-weight: 400;
                font-size: 16px;
                color: #595959;
              }
              .value{
                font-family: 'Din';
                font-weight: bold;
                font-size: 16px;
                color: #262626;
              }
            }
          }
          .third-item{
            width: 33.33%;
            margin: 8px 0px 0px 20px;
            .item{
              display: flex;
              align-items: center;
              img{
                width: 28px;
                height: 28px;
                padding-right: 8px;
              }
              .quantity{
                .name{
                  font-weight: 400;
                  font-size: 16px;
                  color: #595959;
                }
                .value{
                  font-family: 'Din';
                  font-weight: bold;
                  font-size: 16px;
                  color: #262626;
                }
              }
            }
          }
        }
        .select-condition{
          display: flex;
          justify-content: center;
          margin: 8px 0;
        }
        .condition-btn{
          display: flex;
          margin-left: 16px;
          .btn{
            padding: 5px 16px;
            font-weight: 400;
            font-size: 16px;
            color: #262626;  
            border: 1px solid #D9D9D9;  
            border-radius: 4px;
          }
          .active{
            color: #0051FF;
            border: 1px solid #0051FF;
          }
        }
        #first-chart,#second-chart{
          height: 500px;
        }
        .record{
          display: flex;
          margin: 8px 16px 37px 16px;
          .item{
            width: 20%;
            text-align: center;
            font-weight: 400;
            font-size: 16px;
            color: #262626;
            box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.05);
            border-radius: 8px;
            border: 1px solid #F0F0F0;
            padding: 16px 0px 8px 0px;
            margin-right: 9px;
            img{
              width: 48px;
              height: 48px;
            }
          }
          .info{
            display: flex;
            width: 100%;
            margin: 40px;
            .info-item{
              width: 33.33%;
              .name{
                font-weight: 400;
                font-size: 16px;
                color: #595959;
              }
              .value{
                font-family: 'Din';
                font-weight: bold;
                font-size: 20px;
                color: #262626;
                margin-top: 4px;
              }
            }
          }
        }
      }
    }
  }
</style>